<template>
  <div>
    <!-- 添加或修改公路理货报告提运单对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1200px"
      append-to-body
      :close-on-click-modal="false"
      class="self-dialog"
      @close="close"
    >
      <div class="app-container">
        <basic-container>
          <div class="basic-info">
            <div class="ui-top-view">
              <div class="ui-top-title">基本信息</div>
            </div>
            <div class="ui-basic-content">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                class="flex-form"
                label-width="148px"
                label-position="right"
                size="mini"
              >
                <el-form-item label="货物运输批次号" prop="manifestId">
                  <el-input
                    v-model.trim="form.manifestId"
                    placeholder="请输入货物运输批次号"
                  />
                </el-form-item>
                <el-form-item label="进出境类型" prop="iEFlag">
                  <el-select
                    v-model="form.iEFlag"
                    placeholder="请选择进出境类型"
                    @change="iEFlagChange"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in dict.type.sys_i_e_flag"
                      :key="index"
                      :label="item.value + '-' + item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="进出境海关代码" prop="ieCustomsCode">
                  <el-select
                    v-model="form.ieCustomsCode"
                    placeholder="请选择进出境海关代码"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in customsList"
                      :key="index"
                      :label="item.value + '-' + item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="卸货地代码"
                  prop="unloadCode"
                  v-if="this.form.iEFlag == 'I'"
                >
                  <el-input
                    v-model.trim="form.unloadCode"
                    placeholder="请输入卸货地代码"
                  />
                </el-form-item>
                <el-form-item
                  label="装货地代码"
                  prop="loadCode"
                  v-if="this.form.iEFlag == 'E'"
                >
                  <el-input
                    v-model.trim="form.loadCode"
                    placeholder="请输入装货地代码"
                  />
                </el-form-item>
                <el-form-item label="理货时间" prop="talTime">
                  <el-date-picker
                    v-model="form.talTime"
                    type="datetimerange"
                    value-format="yyyyMMddHHmmss"
                    range-separator="至"
                    start-placeholder="理货开始时间"
                    end-placeholder="理货结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="理货责任人名称" prop="talMasterName">
                  <el-input
                    v-model.trim="form.talMasterName"
                    placeholder="请输入理货责任人名称"
                  >
                    <el-button
                      slot="append"
                      class="input-btn"
                      icon="el-icon-plus"
                      @click="handleContact"
                      >联系方式</el-button
                    >
                  </el-input>
                </el-form-item> -->
              <!--  <el-form-item label="传输企业备案关区" prop="customMasterCode">
                  <el-select
                    v-model="form.customMasterCode"
                    placeholder="请选择传输企业备案关区"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in customsList"
                      :key="index"
                      :label="item.value + '-' + item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item> -->
               <!-- <el-form-item label="企业代码" prop="entCode">
                  <el-input
                    v-model.trim="form.entCode"
                    placeholder="请输入企业代码"
                    :disabled="true"
                  />
                </el-form-item> -->
                <el-form-item label="备注" prop="remark">
                  <el-input v-model.trim="form.remark" placeholder="备注" />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </basic-container>

        <basic-container>
          <div class="basic-info">
            <div class="ui-top-view">
              <div class="ui-top-title">提单信息</div>
            </div>
            <div class="ui-basic-content" style="padding-top: 0">
              <el-table
                :data="billTableListData"
                size="mini"
                style="width: 100%"
                border
              >
                <!-- <el-empty slot="empty" :image="require('@/assets/images/empty.png')" :image-size="80"></el-empty> -->
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="billNo"
                  label="提(运)单号"
                  align="center"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="packNo"
                  label="货物总件数	"
                  align="center"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="totalGrossWt"
                  label="货物总毛重(KG)	"
                  align="center"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="wrapType"
                  label="包装种类"
                  align="center"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.custom_wrap_type"
                      :value="scope.row.wrapType"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="volume"
                  label="货物体积(m³)	"
                  align="center"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="editBillItem(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      @click.native.prevent="
                        deleteBillItem(scope.$index, billTableListData)
                      "
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

              <el-form
                ref="billform"
                :model="billForm"
                :rules="billRules"
                class="flex-form"
                label-width="128px"
                label-position="right"
                size="mini"
                style="margin-top: 15px"
              >
                <el-form-item label="提运单号" prop="billNo">
                  <el-input
                    v-model.trim="billForm.billNo"
                    placeholder="请输入提运单号"
                  />
                </el-form-item>
                <el-form-item label="货物总件数" prop="packNo">
                  <el-input-number
                    v-model.trim="billForm.packNo"
                    placeholder="请输入货物总件数"
                    controls-position="right"
                    :min="0"
                  />
                </el-form-item>
                <el-form-item label="货物总毛重(㎏)" prop="totalGrossWt">
                  <el-input-number
                    v-model="billForm.totalGrossWt"
                    placeholder="请输入货物总毛重(KG)"
                    controls-position="right"
                    :min="0"
                  >
                  </el-input-number>
                </el-form-item>
                <el-form-item label="包装种类" prop="wrapType">
                  <el-select
                    v-model="billForm.wrapType"
                    placeholder="请选择包装种类"
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in dict.type.custom_wrap_type"
                      :key="index"
                      :label="item.value + '-' + item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="货物体积(m³)" prop="volume">
                  <el-input-number
                    v-model.trim="billForm.volume"
                    placeholder="请输入货物体积"
                    controls-position="right"
                    :min="0"
                  />
                </el-form-item>
                <el-form-item label-width="40px">
                  <el-button type="primary" @click="billAddForm"
                    >保存</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </basic-container>

        <basic-container>
          <div class="basic-info">
            <div class="ui-top-view">
              <div class="ui-top-title">集装箱信息</div>
            </div>
            <div class="ui-basic-content" style="padding-top: 0">
              <el-table
                :data="contaTableListData"
                size="mini"
                style="width: 100%"
                border
              >
                <!-- <el-empty slot="empty" :image="require('@/assets/images/empty.png')" :image-size="80"></el-empty> -->
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="contaId"
                  label="集装箱(器)编号"
                  align="center"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="damagedNote"
                  label="集装箱(器)残损说明"
                  align="center"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="editContaItem(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      @click.native.prevent="
                        deleteContaItem(scope.$index, contaTableListData)
                      "
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

              <el-form
                ref="contaform"
                :model="contaForm"
                :rules="contaRules"
                class="flex-form"
                label-width="148px"
                label-position="right"
                size="mini"
                style="margin-top: 15px"
              >
                <el-form-item label="集装箱(器)编号" prop="contaId">
                  <el-input
                    v-model.trim="contaForm.contaId"
                    placeholder="请输入集装箱(器)编号"
                  />
                </el-form-item>
                <el-form-item label="集装箱(器)残损说明" prop="damagedNote">
                  <el-input
                    v-model.trim="contaForm.damagedNote"
                    placeholder="请输入集装箱(器)残损说明"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="contaAddForm"
                    >保存</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </basic-container>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" size="small"
          >确 定</el-button
        >
        <el-button @click="close" size="small">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 联系人信息 -->
    <talcontact-info
      ref="contactInfo"
      :communiType="dict.type.mft_communi_type"
      @submitTalContact="submitTalContact"
      :inputName="form.talMasterName"
    ></talcontact-info>
  </div>
</template>

<script>
import {
  getMftTalRoadList,
  addMftTalRoadList,
  updateMftTalRoadList,
} from "@/api/swdecl/mftTalHead";
import TalcontactInfo from "./talcontactInfo.vue";
export default {
  name: "MftTalRoadList-addEdit",
  components: { TalcontactInfo },
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    rowData: {
      type: Object,
      default: () => {},
    },
    customsList: {
      type: Array,
    },
    dict: {},
  },
  data() {
    return {
      // 弹出层
      dialogVisible: false,
      // 标题
      title: "新增",
      // 表单参数
      form: {},
      //提单表单
      billForm: {},
      //集装箱表单
      contaForm: {},
      //集装箱列表
      contaTableListData: [],
      //集装箱编辑状态
      contaEditMark: false,
      //提单编辑状态
      billEditMark: false,
      //提单列表数据
      billTableListData: [],
      // 公路理货报告提运单表格数据
      mftTalRoadListList: [],
      //理货联系人
      talContactList: [],
      // 表单校验
      rules: {
        manifestId: [
          {
            required: true,
            message: "货物运输批次号不能为空",
            trigger: "blur",
          },
        ],
        ieCustomsCode: [
          {
            required: true,
            message: "进出境海关代码不能为空",
            trigger: "blur",
          },
        ],
        unloadCode: [
          {
            required: false,
            message: "卸货地代码不能为空",
            trigger: "blur",
          },
        ],
        loadCode: [
          {
            required: false,
            message: "装货地代码不能为空",
            trigger: "blur",
          },
        ],
        talTime: [
          {
            required: true,
            message: "理货时间不能为空",
            trigger: "blur",
          },
        ],
        customMasterCode: [
          {
            required: true,
            message: "传输备案关区不能为空",
            trigger: "blur",
          },
        ],
        iEFlag: [
          {
            required: true,
            message: "进出境类型不能为空",
            trigger: "blur",
          },
        ],
      },
      billRules: {
        billNo: [
          {
            required: true,
            message: "提运单号不能为空",
            trigger: "blur",
          },
        ],
        totalGrossWt: [
          {
            required: true,
            message: "重量不能为空",
            trigger: "blur",
          },
        ],
        packNo: [
          {
            required: true,
            message: "数量不能为空",
            trigger: "blur",
          },
        ],
        wrapType: [
          {
            required: true,
            message: "包装类型不能为空",
            trigger: "blur",
          },
        ],
      },
      contaRules: {
        contaId: [
          {
            required: true,
            message: "集装箱号不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    dialogType: {
      immediate: true,
      handler(val) {
        this.reset();
        if (val == "add") {
          this.title = "新增";
        } else if (val == "edit") {
          this.loadDetail();
          this.title = "编辑";
        } else if (val == "detail") {
          this.loadDetail();
          this.title = "详情";
        }
      },
    },
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.reset();
    },
    close() {
      this.$refs["form"].resetFields();
      this.$refs["billform"].resetFields();
      this.$refs["contaform"].resetFields();
      this.dialogVisible = false;
      this.contaTableListData = [];
      this.billTableListData = [];
    },
    submitTalContact(val) {
      this.talContactList = val;
      console.log(val);
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        manifestId: null,
        transportMode: "4",
        iEFlag: null,
        ieCustomsCode: null,
        unloadCode: null,
        loadCode: null,
        startTalTime: null,
        endTalTime: null,
        talCompanyCode: null,
        talMasterName: null,
        customMasterCode: null,
        entCode: null,
        remark: null,
        billList: [],
        contaList: [],
      };
      this.resetForm("form");
    },
    // 获取详情
    loadDetail() {
      const id = this.rowData.id;
      getMftTalRoadList(id).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
    //提单表单提交
    billAddForm() {
      this.$refs["billform"].validate((valid) => {
        if (valid) {
          console.log(this.billForm);
          const filteredBills = this.billTableListData.filter(
            (b) => b.billNo === this.billForm.billNo
          );
          console.log(filteredBills);
          if (filteredBills.length > 0) {
            if (!this.billEditMark) {
              this.$modal.alertWarning("此提单已存在");
              return;
            } else {
              let newBills = {
                index: this.billForm.index,
                billNo: this.billForm.billNo,
                volume: this.billForm.volume,
                packNo: this.billForm.packNo,
                wrapType: this.billForm.wrapType,
                totalGrossWt: this.billForm.totalGrossWt,
              };
              this.$set(this.billTableListData, this.billForm.index, newBills);
              this.clearBillForm();
              this.billEditMark = false;
            }
          } else {
            let newBills = {
              index: this.contaTableListData.length + 1,
              billNo: this.billForm.billNo,
              volume: this.billForm.volume,
              packNo: this.billForm.packNo,
              wrapType: this.billForm.wrapType,
              totalGrossWt: this.billForm.totalGrossWt,
            };
            this.billTableListData.push(newBills);
            this.clearBillForm();
          }
        }
      });
    },
    editBillItem(index, row) {
      this.billForm = row;
      this.billForm.index = index;
      this.billEditMark = true;
    },
    deleteBillItem(index, rows) {
      rows.splice(index, 1);
    },
    clearBillForm() {
      this.billForm.billNo = null;
      this.billForm.volume = null;
      this.billForm.packNo = null;
      this.billForm.wrapType = null;
      this.billForm.totalGrossWt = null;
      this.billForm.index = null;
    },

    iEFlagChange(val){
      if(val=='I'){
        this.rules.unloadCode[0].required=true;
         this.rules.loadCode[0].required=false;
      }else{
         this.rules.unloadCode[0].required=false;
          this.rules.loadCode[0].required=true;
      }
    },

    contaAddForm() {
      this.$refs["contaform"].validate((valid) => {
        if (valid) {
          console.log(this.contaForm);
          const filteredContas = this.contaTableListData.filter(
            (b) => b.contaId === this.contaForm.contaId
          );
          console.log(filteredContas);
          if (filteredContas.length > 0) {
            if (!this.contaEditMark) {
              this.$modal.alertWarning("此集装箱号已存在");
              return;
            } else {
              let newConta = {
                index: this.contaForm.index,
                contaId: this.contaForm.contaId,
                damagedNote: this.contaForm.damagedNote,
              };
              this.$set(
                this.contaTableListData,
                this.contaForm.index,
                newConta
              );
              this.clearContaForm();
              this.contaEditMark = false;
            }
          } else {
            let newConta = {
              index: this.contaTableListData.length + 1,
              contaId: this.contaForm.contaId,
              damagedNote: this.contaForm.damagedNote,
            };
            this.contaTableListData.push(newConta);
            this.clearContaForm();
          }
        }
      });
    },
    editContaItem(index, row) {
      this.contaForm = row;
      this.contaForm.index = index;
      this.contaEditMark = true;
    },
    deleteContaItem(index, rows) {
      rows.splice(index, 1);
    },
    clearContaForm() {
      this.contaForm.contaId = null;
      this.contaForm.index = null;
      this.contaForm.damagedNote = null;
    },
    // 理货责任人名称联系方式
    handleContact(row) {
      if (!this.form.talMasterName) {
        this.$message.warning("请先输入理货责任人名称！");
        return;
      }
      this.$refs.contactInfo.open();
    },

    // 提交表单
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.form,
          };
          if (this.form.talTime != null && this.form.talTime.length > 0) {
            this.form.startTalTime = this.form.talTime[0];
            this.form.endTalTime = this.form.talTime[1];
          }
          this.form.contactList = this.talContactList;
          this.form.billList = this.billTableListData;
          this.form.contaList = this.contaTableListData;
          if (this.dialogType == "add") {
            addMftTalRoadList(this.form).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("新增成功");
                this.close();
                this.$emit("handleQuery");
                this.talContactList = [];
              }
            });
          } else {
            updateMftTalRoadList(this.form).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("修改成功");
                this.close();
                this.$emit("handleQuery");
                this.talContactList = [];
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
